<style scoped>
    .add {
        margin-left: 10px;
    }

    .code {
        width: 200px;
        margin-left: 10px;
    }

    .sousuo {
        margin-left: 10px;
    }

    .delete {
        margin-left: 10px;
    }

    .actionBtn {
        margin-left: 5px;
    }

    .page_style {
        margin-top: 10px;
        margin-right: 10px;
        text-align: right;
    }

    .div-modal >>> .ivu-modal-header {
        border-bottom: none;
    }

    .div-modal >>> .ivu-modal-footer {
        border-top: none;
    }

    .select-article {
        width: 400px;
        margin-left: 10px
    }

    .delete {
        margin-left: 10px;
    }
</style>
<template>
    <wl-content-top>
        <template slot="header">
            <span class="name">文章名称：</span>
            <Select v-model="articleName" class="select-article" filterable clearable>
                <Option v-for="(item,index) in NameList" :value="item.article_name" :key="index">{{item.article_name}}</Option>
            </Select>
            <Button type="success" class="sousuo" @click="searchArticle">
                <Icon type="ios-search"/>
                搜索
            </Button>
            <Button type="primary" class="add" @click="add">
                <Icon type="ios-add"/>
                添加文章
            </Button>
            <Button class="delete" type="error" @click="delSelect">批量删除</Button>
        </template>
        <template slot="body">
            <div>
                <Table border ref="selection" :loading="tableLoading" :columns="columns4" :data="data1"
                       @on-selection-change="tableSelectChange">
                    <template slot="action" slot-scope="{ row }">
                        <Button type="primary" size="small" class="actionBtn" @click="editArticle(row)">编辑</Button>
                        <Button type="info" size="small" class="actionBtn" @click="show(row)">详情</Button>
                        <Button type="error" size="small" class="actionBtn" @click="deleteOne(row.id)">删除</Button>
                    </template>
                </Table>
            </div>
            <div class="page_style">
                <Page :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" show-total @on-change="pageChange"/>
            </div>
            <div class="div-modal">
                <edit-article v-if="editModal" ref="edit" :isShow="editModal" :Id="articleId" @cancel="cancelAction"
                              @results="saveArticle"></edit-article>
                <article-details v-if="detailsModal" :isShow="detailsModal" :data="formData" @cancel="cancelAction"></article-details>
            </div>
        </template>
    </wl-content-top>
</template>
<script>
import { getArticleNameList, updateArticle, deleteArticle, deleteData, getArticleListPage } from '@/api/manager'
import { date2str } from '@/api/user'
import EditArticle from './components/edit-article'
import ArticleDetails from './components/article-details'

export default {
  components: { ArticleDetails, EditArticle },
  data () {
    return {
      tableLoading: false,
      articleName: '',
      NameList: [],
      editModal: false,
      columns4: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '文章名称',
          key: 'article_name'
        },
        {
          title: '文章作者',
          key: 'article_author'
        },
        {
          title: '分类名称',
          key: 'category_name'
        },
        {
          title: '发布时间',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      data1: [],
      articleId: '',
      detailsModal: false,
      formData: {},
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 1
      }
    }
  },
  methods: {
    init (data) {
      this.tableLoading = true
      getArticleListPage(data).then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.data1 = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.$Message.error({
            content: '操作失败,\n' + data.errmsg
          })
        }
      })
    },
    articleNameList () {
      getArticleNameList().then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.NameList = data.data.list
        } else {
          this.$Modal.error({
            title: '获取数据失败请稍后重试！'
          })
        }
      })
    },
    add () {
      this.$router.push({
        name: 'addArticle'
      })
    },
    editArticle (row) {
      this.editModal = true
      this.articleId = row.id
    },
    saveArticle (formItem) {
      this.$refs.edit.btnLoading = true
      formItem.release_time = date2str(formItem.release_time)
      updateArticle(formItem).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$Message.success('修改成功')
        } else {
          this.$Message.error('修改失败')
        }
        this.$refs.edit.btnLoading = false
        this.init(this.pageObj)
        this.editModal = false
      })
    },
    cancelAction () {
      this.editModal = false
      this.detailsModal = false
    },
    show (row) {
      this.detailsModal = true
      this.formData = row
    },
    searchArticle () {
      this.pageObj.page = 1
      this.pageObj.pageSize = 10
      const param = {
        ...this.pageObj,
        article_name: this.articleName
      }
      this.init(param)
    },
    deleteOne (row) {
      this.$Modal.confirm({
        title: '确认删除选中信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          let data = {
            id: row
          }
          deleteArticle(data).then(ret => {
            if (ret.data.errcode === 1001) {
              this.$Modal.remove()
              this.init()
            } else {
              this.$Modal.remove()
              this.$Message.error('删除失败')
            }
          })
        }
      })
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item) => {
        ids.push(item.id)
      })
      this.$Modal.confirm({
        title: '确认删除选中信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          deleteData({ ids: JSON.stringify(ids) }).then(ret => {
            if (ret.data.errcode === 1001) {
              this.$Modal.remove()
              this.init()
            } else {
              this.$Modal.remove()
              this.$Message.error('删除失败')
            }
          })
        }
      })
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    pageChange (e) {
      this.pageObj.page = e
      const data = {
        ...this.pageObj,
        article_name: this.articleName
      }
      this.init(data)
    }
  },
  mounted () {
    this.init(this.pageObj)
    this.articleNameList()
  }
}
</script>
